var VisitorRecord = function () {
  var SearchForm = function () {
    var template = /* html */ `
      <div class="search-form">
        <el-form inline label-width="auto">
          <el-form-item label="姓名">
            <el-input v-model="search.userName" class="search-input"></el-input>
          </el-form-item>
          <el-form-item label="记录日期">
            <el-date-picker v-model="search.startDate" value-format="timestamp" :editable="false" :picker-options="startDateOption"
              style="width:140px"></el-date-picker>
            <span>-</span>
            <el-date-picker v-model="search.endDate" value-format="timestamp" :editable="false" :picker-options="endDateOption"
              style="width:140px"></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
    `;

    return {
      mixins: [
        datePickerOptionsMixin('startDate', 'endDate')
      ],

      props: {
        search: {
          type: Object,
          required: true
        }
      },

      data: function () {
        return {};
      },

      template: template
    };
  }();

  var template = /* html */ `
    <div class="visitor-record" v-loading.fullscreen.lock="loading">
      <search-btn-view append-to-body btn-text="查询" @before-open="resetSearch" @search="searchData">
        <div slot="search-content">
          <search-form :search="search"></search-form>
        </div>
      </search-btn-view>
      <div class="visitor-record-table-div">
        <el-table fit stripe border :data="recordList" style="width: 100%" height="parent">
          <el-table-column label="姓名" prop="userName" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="体温" prop="temperature" min-width="120px" align="center"></el-table-column>
          <el-table-column label="结果" width="100px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.temperatureResult!==''" :class="'temperature-'+scope.row.temperatureResult">
                {{scope.row.temperatureResult==='normal'?"正常":"异常"}}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="设备编号" prop="deviceNo" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="设备名称" prop="deviceName" min-width="120px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="头像" width="90px" align="center">
            <template slot-scope="scope">
              <el-image style="width:80px;height:80px" :src="formatImgUrl(scope.row.personImg)" fit="scale-down" :preview-src-list="[scope.row.personImg]">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="记录时间" width="140px" align="center">
            <template slot-scope="scope">
              <span>{{moment(scope.row.ioTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top:10px;text-align:right;" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>
  `;

  return {
    data: function () {
      var search = {
        userName: '',
        startDate: null,
        endDate: null
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        recordList: [],
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        }
      };
    },

    created: function () {
      this.setRecordList(true);
    },

    methods: {
      setRecordList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize,
        };

        var search = this.search;
        var userName = search.userName;
        if (userName !== '') {
          postData.userName = userName;
        }

        var startDate = search.startDate;
        if (startDate !== null) {
          postData.ioTimeStart = moment(startDate).format('YYYY-MM-DD 00:00:00');
        }

        var endDate = search.endDate;
        if (endDate !== null) {
          postData.ioTimeEnd = moment(endDate).format('YYYY-MM-DD 23:59:59');
        }

        this.loading = true;
        var self = this;
        ajaxRequest('visitor/queryAttendance', postData).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var recordList = res.returnData;
          for (var i = 0; i < recordList.length; i++) {
            var record = recordList[i];

            var personImg = record.personImg;
            record.personImg = personImg;

            var temperature = record.temperature;
            if (!SysUtil.isEmpty(temperature)) {
              temperature = Number(temperature);
            }
            var temperatureBasic = record.temperatureBasic;
            if (!SysUtil.isEmpty(temperatureBasic)) {
              temperatureBasic = Number(temperatureBasic);
            }
            var temperatureResult;
            if (temperature === '' || temperatureBasic === '') {
              temperatureResult = '';
            } else {
              temperatureResult = temperature <= temperatureBasic ? 'normal' : 'abnormal';
            }
            record.temperatureResult = temperatureResult;
          }

          self.recordList = recordList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setRecordList(true);
      },

      pageChange: function () {
        this.setRecordList();
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm
    },

    template: template
  };
}();
